
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>洗车店会员管理系统登陆界面</title>
    <div th:replace="header::common"></div>
    <link rel="stylesheet" th:href="@{../static/css/login.css}" media="all"/>
    <link rel="stylesheet" href="../static/css/animate.css">
    <style>
        .btn2{
            margin-top: 5px;
            border-radius: 15px;
        }
        .video-background {
            position: relative;
            overflow: hidden; /* 确保子元素不会超出容器 */
            /* 根据需要设置高度和宽度 */
            height: 100vh; /* 例如，设置为视口高度的100% */
            width: 100%;

        }
        .video-background video {
            /* 使视频覆盖整个容器 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -100; /* 确保视频在内容下方 */
            background: url('https://qq-web.cdn-go.cn/zc.qq.com/8df0009e/v3/img/img-bg@2x.png') no-repeat; /* 备用图片，以防视频不支持 */
            background-size: cover;
        }
        .main{
            border-radius: 15px;
            box-shadow: 8px 8px #b3e5fc;
            background-image: linear-gradient(to bottom right, #ffd6e7, #cdfcf9);
            right: 35%;
            z-index: inherit;
        }
        .layui-input, .layui-select, .layui-textarea{background-color: inherit; padding-left: 30px;}
    </style>
</head>
<body>
<div class="video-background">
    <video autoplay loop muted playsinline>
        <source src="https://qq-web.cdn-go.cn/zc.qq.com/8df0009e/v3/img/bg-video.mp4" type="video/mp4">
        <!--        <source src="path/to/your/video.webm" type="video/webm">-->
        <!-- 视频无法加载时显示的图片 -->
        <img src="https://qq-web.cdn-go.cn/zc.qq.com/8df0009e/v3/img/img-bg@2x.png" alt="Video Fallback Image">
    </video>
<!-- LoginForm -->
<div class="zyl_lofo_main main">

    <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
        <legend>欢迎登录洗车店会员管理系统</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <form id="formId" class="layui-form zyl_pad_01"  method="post">


            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="text" name="name" lay-verify="required|username" autocomplete="off" placeholder="用户名"   class="layui-input">
                    <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                </div>
            </div>

            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
                    <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                </div>
            </div>

            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-row">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        <div class="layui-form-item">
                            <input type="text" name="code" id="vercode" lay-verify="required" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                            <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                        </div>
                    </div>

                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        <img id="img_validation_code" src="/auth/code" onclick="refresh()" />
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <input class="layui-btn layui-btn-fluid" type="button" onclick="submitForm()" value="立即登录"></input>
                <a class="btn btn-xs btn-primary btn2" href="/user/toRegister">没有账号？请注册</a>
            </div>
        </form>
    </div>
    </div>
</div>


<script type="text/javascript"  th:src="@{../static/js/jparticle.min.js}"></script>
<!-- ZylVerificationCode Js-->
<script type="text/javascript"  th:src="@{../static/js/zylVerificationCode.js}"></script>
<script>
    function refresh() {
        $('#img_validation_code').attr('src', '/auth/code?r=' + Math.random());
    }


    function submitForm() {
        //ajax异步提交表单数据
        $.post(
            '/user/login',
            $('#formId').serialize(), //{'name':'zhangsan','password':'123','code':'3sdi'}
            function (result) {//回调函数，后台处理完了之后，会自动调这个回调函数，
                console.log(result);    //result代表后台返回给前台的数据
                if (result.ok) {//{code: 0, msg: '登录成功', data: null, ok: true}
                    let data=result.data;
                    if(data.role==1){
                        mylayer.okUrl(result.msg, '/indexAdmin');
                    }
                    else if(data.role==2){
                        mylayer.okUrl(result.msg,'/indexNormal');
                    }
                    else {
                        mylayer.okUrl(result.msg,'/indexCustom');
                    }
                }
                else {
                    mylayer.errorMsg(result.msg);
                }
            },
            'json'
        );
    }


    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //自定义验证规则
        form.verify({
            username: function(value){
                if(value.length < 3){
                    return '账号至少得3个字符';
                }
            }
            ,pass: [/^[\S]{3,6}$/,'密码必须3到6位，且不能出现空格']
            ,vercodes: function(value){
                //获取验证码
                var zylVerCode = $(".zylVerCode").html();
                if(value!=zylVerCode){
                    return '验证码错误（区分大小写）';
                }
            }
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
    });

</script>
</body>
</html>
